<template>
    <div ref="echartsRef" :class="className" :style="{ height: height, width: width }" />
  </template>
  
  <script setup>
  import * as echarts from "echarts";
  import 'echarts-liquidfill'
  
  const props = defineProps({
    dataArray: {
      type: Array,
      default: () => [0.6], //水波图比例，占比 传几个值为对应几条波浪
    },
    waterRadius: {//水波图百分比
      type: String,
      default: '90%'
    },
    titleShow: {//是否显示标题
      type: Boolean,
      default: true,
    },
    waterTitle: {//标题文本
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "liquidChart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    }
  })
  
  const className = props.className;
  const width = props.width;
  const height = props.height;
  const echartsRef = ref(null);
  let myChart = null;
  
  // 组件挂载后绘制水球图
  onMounted(() => {
    drawWaterball(props.dataArray)
  })
    
  // 监听dataArray的变化，重新绘制水球图
  watch(
    () => props.dataArray,
    (newValue) => {
        drawWaterball(newValue)
    },
  )

  function drawWaterball(dataArr) {
    myChart = echarts.init(echartsRef.value);
    myChart.setOption({
        series: [{
          type: 'liquidFill',//设置图表类型
          data: dataArr, // 设置水位，值为0到1之间
          radius: props.waterRadius, // 设置图的大小
          outline: {
            borderDistance: 0, // 外边框距离
            itemStyle: {
              borderWidth: 2, // 外边框宽度
              borderColor: '#5083f8' // 外边框颜色
            }
          },
          backgroundStyle: {
            color: '#5083f8' // 背景色
          },
          label: {
            normal: {
              textStyle: {
                color: '#fff',//标签文本颜色
                insideColor: '#fff',
                fontSize: 14
              }
            }
          }
        }],
        title: {
            show: props.titleShow, // 是否显示标题
            text: props.waterTitle, // 标题文本
            x: '41.5%', // 标题X位置
            y: '54%', // 标题Y位置
            z: 1999, // 标题层级
            textAlign: 'center', // 文本对齐方式
            textStyle: {
                color: '#fff', // 标题颜色
                fontWeight: 'normal', // 标题字体粗细
                fontSize: 11, // 标题字体大小
            },
        }
    });
  }
  </script>
  